<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Climb the Pole Duel - Comparison Degree</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Quicksand:wght@500;700&display=swap');

        :root {
            --sky-blue: #87CEEB;
            --grass-green: #2d5a27;
            --pole-brown: #5d4037;
        }

        body {
            font-family: 'Quicksand', sans-serif;
            overflow: hidden;
            background: var(--sky-blue);
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .title-font {
            font-family: 'Fredoka One', cursive;
        }

        /* Arena Styling */
        .pinang-pole {
            width: 25px;
            background: linear-gradient(to right, #4e342e, #8d6e63, #4e342e);
            border-radius: 10px;
            position: relative;
            height: 100%;
        }

        .climber {
            transition: bottom 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            font-size: 2.5rem;
            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
            z-index: 20;
        }

        .grass {
            background: var(--grass-green);
            height: 80px;
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 5;
        }

        /* Animations */
        .shake {
            animation: shake 0.5s ease-in-out;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-8px); }
            40% { transform: translateX(8px); }
            60% { transform: translateX(-8px); }
            80% { transform: translateX(8px); }
        }

        .cloud {
            position: absolute;
            background: white;
            border-radius: 50px;
            opacity: 0.8;
            animation: moveClouds 25s linear infinite;
            z-index: 1;
        }

        @keyframes moveClouds {
            from { transform: translateX(-200px); }
            to { transform: translateX(120vw); }
        }

        .option-btn {
            transition: all 0.2s;
            border-bottom-width: 4px;
        }

        .option-btn:active {
            transform: translateY(2px);
            border-bottom-width: 2px;
        }
    </style>
</head>
<body class="p-4">

    <!-- Background Decoration -->
    <div class="cloud w-32 h-10 top-10" style="animation-delay: 0s;"></div>
    <div class="cloud w-48 h-14 top-32" style="animation-delay: -7s;"></div>
    <div class="cloud w-28 h-8 top-16" style="animation-delay: -15s;"></div>
    <div class="grass"></div>

    <!-- Header UI -->
    <div class="z-10 text-center mb-4">
        <h1 class="title-font text-3xl md:text-5xl text-orange-600 drop-shadow-lg uppercase tracking-wider">Climb the Pole Duel</h1>
        <p class="text-blue-900 font-bold bg-white/50 px-4 py-1 rounded-full inline-block mt-2">
            Topic: Comparison Degree (8th Grade)
        </p>
    </div>

    <!-- Game Content -->
    <div class="flex flex-1 w-full max-w-5xl justify-between items-end pb-24 z-10 relative px-4">
        
        <!-- Player Lane -->
        <div class="flex flex-col items-center h-[70vh] relative group">
            <div class="absolute -top-10 text-4xl animate-bounce">🎁</div>
            <div id="pole1" class="pinang-pole shadow-inner">
                <div id="climber1" class="climber absolute left-1/2 -translate-x-1/2" style="bottom: 0;">🏃‍♂️</div>
            </div>
            <div class="mt-4 bg-blue-600 text-white px-4 py-1 rounded-lg font-black shadow-lg">YOU</div>
        </div>

        <!-- Question Box Container -->
        <div id="main-panel" class="bg-white/95 backdrop-blur-sm p-6 rounded-3xl shadow-2xl border-4 border-orange-400 w-full max-w-md mx-4 self-center z-30 transform transition-all">
            
            <!-- Start Screen -->
            <div id="start-screen" class="text-center">
                <div class="text-6xl mb-4">🧗‍♂️</div>
                <h2 class="text-2xl font-bold text-gray-800 mb-4">Greasy Pole Challenge!</h2>
                <p class="text-gray-600 mb-6 italic">Answer 10 questions correctly to reach the top and beat your opponent!</p>
                <button onclick="initGame()" class="w-full bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white font-black py-4 px-8 rounded-2xl text-xl shadow-[0_6px_0_rgb(194,65,12)] transition-all active:shadow-none active:translate-y-1">
                    START DUEL! 🚩
                </button>
            </div>

            <!-- Quiz Screen -->
            <div id="quiz-screen" class="hidden">
                <div class="flex justify-between items-center mb-6">
                    <span class="bg-orange-100 text-orange-700 font-black px-4 py-1 rounded-full text-sm">
                        QUESTION <span id="q-number">1</span>/10
                    </span>
                    <div id="feedback-indicator" class="w-8 h-8 rounded-full flex items-center justify-center font-bold"></div>
                </div>
                
                <div class="mb-8">
                    <h3 id="question-text" class="text-xl md:text-2xl font-bold text-gray-800 text-center leading-relaxed">
                        Loading...
                    </h3>
                </div>

                <div id="options-container" class="grid grid-cols-1 gap-4">
                    <!-- Buttons will be injected here -->
                </div>
            </div>

            <!-- Result Screen -->
            <div id="result-screen" class="hidden text-center">
                <div id="result-icon" class="text-7xl mb-4">🏆</div>
                <h2 id="result-title" class="text-3xl title-font mb-2">VICTORY!</h2>
                <p id="result-msg" class="text-gray-600 mb-8 font-medium"></p>
                <button onclick="location.reload()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-10 rounded-2xl transition-all shadow-lg">
                    PLAY AGAIN
                </button>
            </div>
        </div>

        <!-- Bot Lane -->
        <div class="flex flex-col items-center h-[70vh] relative">
            <div class="absolute -top-10 text-4xl">🎁</div>
            <div id="pole2" class="pinang-pole shadow-inner">
                <div id="climber2" class="climber absolute left-1/2 -translate-x-1/2 opacity-60 grayscale-[50%]" style="bottom: 0;">🏃‍♀️</div>
            </div>
            <div class="mt-4 bg-red-600 text-white px-4 py-1 rounded-lg font-black shadow-lg">RIVAL</div>
        </div>
    </div>

    <!-- Controls -->
    <div class="fixed bottom-6 right-6 z-50 flex flex-col gap-3">
        <button id="music-btn" class="bg-white/90 p-4 rounded-full shadow-xl hover:scale-110 transition-transform text-2xl border-2 border-orange-200">
            🎵
        </button>
    </div>

    <script>
        // Quiz Data (English)
        const questions = [
            { q: "An elephant is ... than a cat.", o: ["Big", "Bigger", "Biggest"], a: 1 },
            { q: "This is the ... movie I have ever seen.", o: ["Good", "Better", "Best"], a: 2 },
            { q: "Math is ... than Art for me.", o: ["Difficult", "More difficult", "Most difficult"], a: 1 },
            { q: "Dina is as ... as her mother.", o: ["Beautiful", "More beautiful", "Most beautiful"], a: 0 },
            { q: "The cheetah is the ... animal in the world.", o: ["Fast", "Faster", "Fastest"], a: 2 },
            { q: "My house is ... than yours.", o: ["Far", "Farther", "Farthest"], a: 1 },
            { q: "This task is ... than the previous one.", o: ["Easy", "Easier", "Easiest"], a: 1 },
            { q: "Mount Everest is the ... mountain in the world.", o: ["High", "Higher", "Highest"], a: 2 },
            { q: "The weather today is ... than yesterday.", o: ["Bad", "Worse", "Worst"], a: 1 },
            { q: "Gold is ... expensive than silver.", o: ["More", "Most", "As"], a: 0 }
        ];

        // State Management
        let currentIdx = 0;
        let pScore = 0;
        let bScore = 0;
        let isMuted = false;
        let isGameRunning = false;
        let audioInit = false;

        // Audio Engine (Web Audio API)
        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        let loopId;

        function synth(freq, dur, type = 'sine', vol = 0.1) {
            if (isMuted) return;
            const osc = audioCtx.createOscillator();
            const g = audioCtx.createGain();
            osc.type = type;
            osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
            g.gain.setValueAtTime(vol, audioCtx.currentTime);
            g.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + dur);
            osc.connect(g); g.connect(audioCtx.destination);
            osc.start(); osc.stop(audioCtx.currentTime + dur);
        }

        function playBgMusic() {
            const notes = [261.63, 329.63, 392, 523.25, 392, 329.63]; 
            let i = 0;
            loopId = setInterval(() => {
                if(isGameRunning) {
                    synth(notes[i % notes.length], 0.3, 'triangle', 0.03);
                    i++;
                }
            }, 450);
        }

        // Core Functions
        function initGame() {
            if(!audioInit) { audioCtx.resume(); playBgMusic(); audioInit = true; }
            isGameRunning = true;
            document.getElementById('start-screen').classList.add('hidden');
            document.getElementById('quiz-screen').classList.remove('hidden');
            renderQuestion();
            startOpponentAI();
        }

        function renderQuestion() {
            if(currentIdx >= questions.length) {
                checkWinner();
                return;
            }

            const data = questions[currentIdx];
            document.getElementById('q-number').innerText = currentIdx + 1;
            document.getElementById('question-text').innerText = data.q;
            
            const container = document.getElementById('options-container');
            container.innerHTML = '';
            
            data.o.forEach((opt, i) => {
                const b = document.createElement('button');
                b.className = "option-btn w-full p-4 bg-orange-50 border-orange-200 border-2 rounded-2xl font-bold text-gray-700 hover:bg-orange-100 text-lg shadow-[0_4px_0_rgba(251,146,60,0.5)]";
                b.innerText = opt;
                b.onclick = () => handleAnswer(i);
                container.appendChild(b);
            });
        }

        function handleAnswer(choice) {
            const data = questions[currentIdx];
            const panel = document.getElementById('main-panel');
            const indicator = document.getElementById('feedback-indicator');

            if(choice === data.a) {
                // Correct
                pScore += 10;
                indicator.innerText = "✓";
                indicator.className = "w-8 h-8 rounded-full flex items-center justify-center font-bold bg-green-500 text-white animate-ping";
                synth(523.25, 0.2, 'sine', 0.1); 
                setTimeout(() => synth(659.25, 0.3, 'sine', 0.1), 100);
            } else {
                // Wrong
                panel.classList.add('shake');
                indicator.innerText = "✕";
                indicator.className = "w-8 h-8 rounded-full flex items-center justify-center font-bold bg-red-500 text-white";
                synth(150, 0.4, 'sawtooth', 0.1);
                setTimeout(() => panel.classList.remove('shake'), 500);
            }

            updatePositions();
            currentIdx++;
            
            // Delay for next question
            setTimeout(() => {
                indicator.className = "";
                indicator.innerText = "";
                renderQuestion();
            }, 800);
        }

        function startOpponentAI() {
            const interval = setInterval(() => {
                if(!isGameRunning) { clearInterval(interval); return; }
                
                // Bot chance to move up
                if(Math.random() > 0.75 && bScore < 90) {
                    bScore += 10;
                    updatePositions();
                }
            }, 2500);
        }

        function updatePositions() {
            document.getElementById('climber1').style.bottom = pScore + "%";
            document.getElementById('climber2').style.bottom = bScore + "%";
            
            if(pScore >= 95 || bScore >= 95) checkWinner();
        }

        function checkWinner() {
            isGameRunning = false;
            document.getElementById('quiz-screen').classList.add('hidden');
            document.getElementById('result-screen').classList.remove('hidden');
            
            const title = document.getElementById('result-title');
            const msg = document.getElementById('result-msg');
            const icon = document.getElementById('result-icon');

            if(pScore >= bScore) {
                title.innerText = "YOU WIN! 🏆";
                msg.innerText = "Amazing! You reached the top first and secured the prizes!";
                icon.innerText = "🏆";
                synth(523, 0.5); synth(659, 0.5); synth(783, 0.5);
            } else {
                title.innerText = "GAME OVER!";
                msg.innerText = "Your rival reached the top before you. Try again!";
                icon.innerText = "🏃‍♀️💨";
            }
        }

        // Toggle Music
        document.getElementById('music-btn').onclick = () => {
            isMuted = !isMuted;
            document.getElementById('music-btn').innerText = isMuted ? "🔇" : "🎵";
        };
    </script>
</body>
</html>